<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <form id="form1">
    <input type="text" name="uname" autocomplete="off" />
    <input type="password" name="upwd" />
    <button type="submit">提交</button>
  </form>

  <script>
    // 接口地址： http://www.liulongbin.top:3006/api/formdata
    // 请求方式： POST
const form= document.querySelector('#form1')
form.addEventListener('submit',function (e) {
e.preventDefault()//阻止系统默认提交
const fd = new FormData(this)
  const xhr = new XMLHttpRequest()
  xhr.open('POST','http://www.liulongbin.top:3006/api/formdata')
    xhr.send(fd)
    xhr.onreadystatechange =function(){
      if (xhr.readyState===4 &&xhr.status===200) {
        console.log(JSON.parse(xhr.responseText));
      }
    }
})
    // 1. 获取到 form 表单元素
    // 2. 阻止表单的默认提交行为
    // 3. 创建 FormData，快速获取到 form 表单中的数据


  </script>

</body>

</html>